<template>
  <vxe-table
    border
    row-key
    ref="xTable1"
    class="sortable-row-demo"
    :data="tableData"
  >
    <vxe-table-column width="60">
      <template v-slot>
        <span class="drag-btn">
          <i class="vxe-icon--menu"></i>
        </span>
      </template>
      <template v-slot:header>
        <vxe-tooltip
          v-model="showHelpTip1"
          content="按住后可以上下拖动排序！"
          enterable
        >
          <i
            class="vxe-icon--question"
            @click="showHelpTip1 = !showHelpTip1"
          ></i>
        </vxe-tooltip>
      </template>
    </vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="sex" title="Sex"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
    <vxe-table-column
      field="address"
      title="Address"
      show-overflow
    ></vxe-table-column>
  </vxe-table>
</template>
<script>
import data from "./sortable32.json";
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      tableData: [],
      showHelpTip1:false
    };
  },
  created(){
      this.rowDrop()
      setTimeout(function(){
        this.tableData=data.splice(data.length-10);
      },1000)
  },
  methods: {
    rowDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable1;
        this.sortable = Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".vxe-body--row",
            onEnd: ({ newIndex, oldIndex }) => {
              let currRow = this.tableData.splice(oldIndex, 1)[0];
              this.tableData.splice(newIndex, 0, currRow);
            },
          }
        );
      });
    },
  },
};
</script>
<style scoped>
.sortable-row-demo .drag-btn {
          cursor: move;
          font-size: 12px;
        }
        .sortable-row-demo .vxe-body--row.sortable-ghost,
        .sortable-row-demo .vxe-body--row.sortable-chosen {
          background-color: #dfecfb;
        }
</style>